import React, {useState, useEffect} from 'react';
import {Table, Button, Modal, notification } from 'antd'
import axios from 'axios';
import {
    DeleteOutlined,
    EditOutlined,
    ToTopOutlined
  } from '@ant-design/icons';
const { confirm } = Modal

//react函数组件
const NewsDraft = (props) => {
    //状态
    const [dataSource, setdataSource] = useState([]);
    //获取当前用户信息
    const {username} = JSON.parse(localStorage.getItem('token'))
    useEffect(()=>{
        axios.get(`/news?author=${username}&auditState=0&_expand=category`).then(res=>{
           setdataSource(res.data)
        })
    },[username])
    //删除弹框
    const confirMothod = (item) => {
        confirm({
            title: '您确定删除吗',
            icon: <EditOutlined />,
            onOk(){
                deleteMethod(item)
            },
            onCancel(){
                console.log("Can")
            }
        })
    }
    // 确认删除
    const deleteMethod = (item) => {
            setdataSource (dataSource.filter(data=>data.id!==item.id))
            axios.delete(`/news/${item.id}`)
    }
    // 上传提交审核
    const handlecheck = (id) => {
        setdataSource(dataSource.filter(item=>item.id!==id))
        axios.patch(`/news/${id}`,{
            auditState: 1
        }).then(res=>{
            notification.info({
                message: `上传成功`,
                description:`您可以去审核列表中查看您提交审核的新闻`,
                placement:'bottomRight',
              });
        })
    }
        // table表格
        const columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                render: (id)=>{
                    return <b>{id}</b>
                }
            },
            {
                title: '新闻标题',
                dataIndex: 'title',
                render:(title, item)=>{
                    return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
                }
            },
            {
                title: '作者',
                dataIndex: 'author',
            },
            {
                title: '分类',
                dataIndex: 'category',
                render:(category)=>{
                    return category.title
                }
            },
            {
                title: '操作',
                render: (item)=>{
                    return <div>
                        {/* 删除 */}
                        <Button type="primary" shape="circle"  danger icon={<DeleteOutlined />}
                        onClick={()=>confirMothod(item)}/>
                        &nbsp;
                        {/* 更新 */}
                        <Button  shape="circle" icon={<EditOutlined onClick={()=>{
                            props.history.push(`/news-manage/update/${item.id}`)
                        }} />}/>
                        &nbsp;
                        {/* 提交审核 */}
                        <Button type="primary" shape="circle" icon={<ToTopOutlined />} 
                        onClick={()=>handlecheck(item.id)} 
                        />
                    </div>
                }
            },
          ];
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize:5
            }} rowKey={item=>item.id}/>
        </div>
    );
};

export default NewsDraft;